<template>
  <t-dialog
    :theme="theme"
    :header="cpHeader"
    :visible.sync="visible"
    @confirm="_confirm"
    @cancel="_cancel"
    :cancelBtn="cancelBtn"
    ref="customDialog"
    v-if="visible"
    :zIndex="zIndex"
    class="custom-dialog"
    :confirmOnEnter="true"
  >
    <div slot="body" v-html="msg" class="custom-dialog-body">
    </div>
  </t-dialog>
</template>

<script>
export default {
  desc: '自定义对话框',
  name: 'customDialog',
  components: {},
  props: {
    /**
     * @Description：主题 warning/danger/success
     * @Date 2023-10-19
     */
    theme: {
      type: String,
      default: () => 'success',
    },
    /**
     * @Description：取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本
     * @Date 2023-10-19
     */
    cancelBtn: {
      type: String,
      default: () => null,
    },
    /**
     * @Description：抽屉层级，样式默认为 1500
     * @Date 2023-10-19
     */
    zIndex: {
      type: Number,
      default: () => 1500,
    }
  },
  created() {},
  data() {
    return {
      // 是否显示
      visible: false,
      // 确认回调函数
      confirmCall: null,
      // 取消回调函数
      cancelFun: null,
      // 提示信息
      msg: null
    }
  },
  methods: {
    // 对话框实例
    inst() {
      return this.$refs.customDialog
    },
    // 点击确认按钮
    _confirm() {
      this.hide()
      if (this.confirmCall) {
        this.confirmCall()
      }
    },
    // 点击取消按钮
    _cancel() {
      this.hide()
      if (this.cancelFun) {
        this.cancelFun()
      }
    },
    // 显示
    show(msg = '提示内容', confirmCall, cancelFun) {
      this.msg = msg
      this.confirmCall = confirmCall
      this.cancelFun = cancelFun
      this.visible = true
    },
    // 隐藏
    hide() {
      this.visible = false
    }
  },
  watch: {},
  computed: {
    // 提示标题
    cpHeader() {
      if (this.theme == 'success') {
        return '操作成功'
      }
      if (this.theme == 'danger') {
        return '操作失败'
      }
      if (this.theme == 'warning') {
        return '系统提示'
      }
    }
  },
}
</script>

<style lang="scss">
  .custom-dialog-body{
    word-break: break-all;
    max-height: 300px;
    overflow: auto;
  }
  .custom-dialog{
    z-index: 9999999 !important;
  }
</style>
